<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/jutils.min.js"></script>
<script type="text/javascript" src="/js/simple-calendar.js"></script>
<link rel="stylesheet" href="css/simple-calendar.css" />
</head>
<body>
<div>
    <input id="nlDate" type="date" value="" placeholder="默认时间" onclick="showDate()">
</div>
<div id="container" style="float:none;margin: 0px auto;visibility: hidden" onclick="getDate()"></div>
<button class="datebutton" onclick="channel()" style="visibility: hidden">取消</button>
<script>
    $(function(){
        $("#nlDate").click(function (event) {
            event.preventDefault();
        })
    })
    var myCalendar = new SimpleCalendar('#container');
    myCalendar.updateSize('800px', '500px');
    if (/(Android)/i.test(navigator.userAgent)) {
        myCalendar.updateSize('230px', '300px');
        $("#container").css("font-size","10px");
        $("#container").css("left","25%");
        $("#container").css("top","20%");
        $("#channel").css("left","65%");
        $("#channel").css("top","75%");
        $("#querd").css("left","50%");
        $("#querd").css("top","75%");
    } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        myCalendar.updateSize('230px', '300px');
        $("#container").css("font-size","10px");
        $("#container").css("left","25%");
        $("#container").css("top","20%");
        $("#channel").css("left","65%");
        $("#channel").css("top","75%");
        $("#querd").css("left","50%");
        $("#querd").css("top","75%");
    } else {
        myCalendar.updateSize('300px', '350px');
        $("#container").css("font-size","15px");
        $("#container").css("left","30%");
        $("#container").css("top","10%");
        $("#channel").css("left","65%");
        $("#channel").css("top","100%");
        $("#querd").css("left","57%");
        $("#querd").css("top","100%");
    }
    function showDate(){
        $("#container").css("visibility","visible");
        $(".datebutton").css("visibility","visible");
    }
    function getDate(){
        let date = myCalendar.getSelectedDay();
        console.log(date);

        date =jutils.formatDate(date,"YYYY-MM-DD");
        $("#nlDate").val(date);
        $("#container").css("visibility","hidden");
        $(".datebutton").css("visibility","hidden");
    }
    function channel(){
        $("#container").css("visibility","hidden");
        $(".datebutton").css("visibility","hidden");
    }


</script>
</body>
</html>